import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { TanstackQueryInitializer } from "@/context/query-client"
import { NextIntlClientProvider } from "next-intl"
import { getLocale } from "next-intl/server"
import { ThemeProvider } from "next-themes"
import "./globals.css"

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"]
})

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"]
})

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app"
}

export default async function RootLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode }) {
  const locale = await getLocale()

  return (
    <html lang={locale} suppressHydrationWarning>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <ThemeProvider attribute="data-theme" defaultTheme="system" enableSystem>
          <NextIntlClientProvider>
            <TanstackQueryInitializer>
              {children}
              {modal}
            </TanstackQueryInitializer>
          </NextIntlClientProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
